<template>
	<view>
		<u-navbar
			title="选择收货地址"
			:placeholder="true"
			:safeAreaInsetTop="true"
			bgColor="#f8f8f8"
			leftIconSize="42rpx"
			:autoBack="true"
			:titleStyle="{color:'#333'}"
		></u-navbar>
		
		<zl-address :color="color" :addressList="addressList" @choose="choose" :attr="attr" :buttons="[]"></zl-address>
		
		<view class="save">
		    <view class="btn" :style="'background:' + color" @tap="add">添加地址</view>
		</view>
	</view>
</template>

<script>
	import { getUserAddress } from '@/api/api.js'
	
    export default {
        data() {
            return {
                color: '#FF5722',
                addressList: [],
                attr:{
                    is_default:'is_default',
                    reciver_name:'reciver_name',
                    mobile:'mobile',
                    address:'address',
                    details:'details'
                }
            };
        },
        mounted() {
        },
        onShow() {
            this.getAddress()
        },
        props: {},
        methods: {
            getAddress(){
				getUserAddress().then(res => {
					this.addressList = res.data
				})
            },
            choose(item){
				console.log(item)
                uni.setStorageSync('mallRecipientAddress',item)
				uni.navigateBack()
            },
			add() {
			    uni.navigateTo({
			        url: '/pages/address/add'
			    })
			},
        }
    };
</script>
<style lang="scss" scoped>
    .save {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 120upx;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .save view {
        display: flex;
    }

    .save .btn {
        box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.4);
        width: 70%;
        height: 80upx;
        border-radius: 80upx;
        background-color: #f23a3a;
        color: #fff;
        justify-content: center;
        align-items: center;
        font-size: 30upx;
        margin-bottom: 60px;
    }
</style>